<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ScribeHow - View Recording</title>
  <link rel="stylesheet" href="viewer.css">
</head>
<body>
  <div class="viewer-container">
    <!-- 头部导航 -->
    <header class="viewer-header">
      <div class="header-left">
        <button class="back-btn" id="backBtn">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M12 14l-4-4 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          Back
        </button>
        <h1 id="recordingTitle">Loading...</h1>
      </div>
      <div class="header-right">
        <button class="btn btn-secondary" id="editBtn">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M11.333 2A1.885 1.885 0 0114 4.667l-9 9-3.667 1 1-3.667 9-9z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          Edit
        </button>
        <button class="btn btn-primary" id="exportBtn">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M8 11V3m0 0L5 6m3-3l3 3m5 2v5a1 1 0 01-1 1H1a1 1 0 01-1-1V8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          Export
        </button>
      </div>
    </header>

    <!-- 主要内容区 -->
    <main class="viewer-main">
      <!-- 录制信息 -->
      <div class="recording-info">
        <div class="info-item">
          <span class="info-label">URL:</span>
          <a href="#" id="recordingUrl" target="_blank" class="info-value">-</a>
        </div>
        <div class="info-item">
          <span class="info-label">Date:</span>
          <span id="recordingDate" class="info-value">-</span>
        </div>
        <div class="info-item">
          <span class="info-label">Duration:</span>
          <span id="recordingDuration" class="info-value">-</span>
        </div>
        <div class="info-item">
          <span class="info-label">Steps:</span>
          <span id="stepCount" class="info-value">-</span>
        </div>
      </div>

      <!-- 步骤列表 -->
      <div class="steps-container" id="stepsContainer">
        <div class="loading">
          <div class="loading-spinner"></div>
          <p>Loading recording...</p>
        </div>
      </div>
    </main>

    <!-- 导出对话框 -->
    <div class="modal" id="exportModal">
      <div class="modal-content">
        <div class="modal-header">
          <h2>Export Recording</h2>
          <button class="close-btn" id="closeModalBtn">&times;</button>
        </div>
        <div class="modal-body">
          <div class="export-options">
            <label class="export-option">
              <input type="radio" name="format" value="markdown" checked>
              <div class="option-content">
                <span class="option-title">Markdown</span>
                <span class="option-desc">Best for documentation and README files</span>
              </div>
            </label>
            <label class="export-option">
              <input type="radio" name="format" value="html">
              <div class="option-content">
                <span class="option-title">HTML</span>
                <span class="option-desc">Self-contained web page with styling</span>
              </div>
            </label>
            <label class="export-option">
              <input type="radio" name="format" value="json">
              <div class="option-content">
                <span class="option-title">JSON</span>
                <span class="option-desc">Raw data for integration</span>
              </div>
            </label>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" id="cancelExportBtn">Cancel</button>
          <button class="btn btn-primary" id="confirmExportBtn">Export</button>
        </div>
      </div>
    </div>

    <!-- 编辑模式工具栏 -->
    <div class="edit-toolbar" id="editToolbar">
      <button class="toolbar-btn" id="saveBtn">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M12.667 14H3.333A1.333 1.333 0 012 12.667V3.333A1.333 1.333 0 013.333 2h7.334L14 5.333v7.334A1.333 1.333 0 0112.667 14z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M11.333 14v-6H4.667v6M4.667 2v3.333h6.666" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        Save
      </button>
      <button class="toolbar-btn" id="cancelEditBtn">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M12 4L4 12M4 4l8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        Cancel
      </button>
    </div>
  </div>

  <!-- 图片预览模态框 -->
  <div class="image-preview-modal" id="imagePreviewModal">
    <div class="image-preview-content">
      <img id="previewImage" src="" alt="Preview">
      
      <!-- 顶部控制按钮 -->
      <div class="preview-controls">
        <button class="preview-btn" id="fullscreenBtn" title="Fullscreen">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M3 7V3h4M17 7V3h-4M3 13v4h4M17 13v4h-4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
        <button class="preview-btn" id="downloadBtn" title="Download">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M10 13V3M10 13l3-3M10 13l-3-3M3 17h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
        <button class="preview-btn" id="closePreview" title="Close">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
      </div>
      
      <!-- 导航控制 -->
      <div class="navigation-controls">
        <button class="nav-btn" id="prevBtn" title="Previous">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
        <span class="nav-info" id="navInfo">1 / 5</span>
        <button class="nav-btn" id="nextBtn" title="Next">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
      </div>
      
      <!-- 缩放控制 -->
      <div class="zoom-controls">
        <button class="zoom-btn" id="zoomInBtn" title="Zoom In">+</button>
        <div class="zoom-info" id="zoomInfo">100%</div>
        <button class="zoom-btn" id="zoomOutBtn" title="Zoom Out">-</button>
        <button class="zoom-btn" id="resetZoomBtn" title="Reset">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M1 8s3-6 7-6 7 6 7 6-3 6-7 6-7-6-7-6z" stroke="currentColor" stroke-width="1.5"/>
            <circle cx="8" cy="8" r="2" stroke="currentColor" stroke-width="1.5"/>
          </svg>
        </button>
      </div>
    </div>
  </div>

  <script src="viewer.js"></script>
</body>
</html>
